﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TradeSystem</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link id="theme" rel="stylesheet" type="text/css" href="" />
	    <link rel="stylesheet" type="text/css" href="extsrc/resources/css/ext-all.css" /> 
        <script type="text/javascript" src="extsrc/ext-base.js"></script> 
        <script type="text/javascript" src="extsrc/ext-all.js"></script> 
    </head>
    
    <script>
        Ext.onReady(function(){
			//切换主题
			function changeTheme(theme){
				Ext.util.CSS.swapStyleSheet("theme", "extsrc/resources/css/xtheme-" + theme + ".css");
				for(var i=0; i<window.frames.length; i++){
					window.frames[i].Ext.util.CSS.swapStyleSheet("theme", "extsrc/css/xtheme-" + theme + ".css");
				}
			}
            //北边，标题栏
            var north_item = new Ext.Panel({
             
                region: 'north',
                contentEl: 'north-div',
               // split: true,
               // border: true,
               // collapsible: true,
                //height: 50,
                minSize: 50,
                maxSize: 120,
				tbar: new Ext.Toolbar({
					enableOverflow: true,
					items: [{
							text:'<span style="font-weight:bold">TradeSystem</span>'
						},'->',{
							xtype:'button',
							text: 'change sytle',
							iconCls: 'add16',
							menu: [{
								text: 'vista', 
								handler: function(){changeTheme('vista')} 
							},{
								text: 'olive', 
								handler: function(){changeTheme('olive')} 
							},{
								text: 'silver', 
								handler: function(){changeTheme('gray')} 
							},{
								text: 'access', 
								handler: function(){changeTheme('access')} 
							}]
						}]
					})
            });
           
			
            //南边，状态栏
            var south_item = new Ext.Panel({
                title: 'all right reserved',
                region: 'south',
                contentEl: 'south-div',
               // split: true,
               // border: true,
               // collapsible: true,
               // height: 50,
                minSize: 50,
                maxSize: 120
            });
            
            
             //右边具体功能面板区   
            var center_item = new Ext.TabPanel({
                region: 'center',
				contentEl: 'center-div',
                enableTabScroll: true,
                activeTab: 0,
                items: [{
                    id: 'homePage',
                    title: 'information',
                    autoScroll: true,
                    html: '<div style="position:absolute;color:#ff7624;top:40%;left:40%;">stock information</div>'
                }]
            });
         

            //西边，后台管理
        //    var managerUrl = "http://www.google.com";
        //    var managerUrlName = "搜索";
            var west_item = new Ext.Panel({
            
                title: 'stocktype',
                region: 'west',
                contentEl: 'west-div',
                split: true,
                border: true,
                collapsible: true,
                width: 140,
                minSize: 120,
                maxSize: 200,
                layout: "accordion",
                layoutConfig: {
                    animate: true
                },
                items: [{
                    title: "stock1",
                    html: '<div id="tree"></div>'
                }, {
                    title: "stock2",
                    html: '<div id="producttree"></div>'
                }, {
                    title: "stock3",
                    html: '<div id="semifinishedtree"></div>'
                }]

            });
            
            new Ext.Viewport({
                layout: "border",
                items: [north_item, south_item, west_item, center_item]
            });
           
		   
		   
		   

            //设置树形面板
            //定义树的跟节点
            var root = new Ext.tree.TreeNode({
                id: "root",//根节点id
                text: ""
            });
            
            //定义树节点,研发中心
            var c1 = new Ext.tree.TreeNode({
                id: 'c1',//子结点id
                text: 'stock1',
                listeners: {
                    'click': function(node, event){
                        event.stopEvent();
                        var n = center_item.getComponent(node.id);
                        
                        if (!n) { //判断是否已经打开该面板   
                            n = center_item.add({
                                'id': node.id,
                                'title': node.text,
                                closable: true, //通过html载入目标页   
                              //  html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="src/material/materialSupply.html"></iframe>'
                            });
                        }
                        center_item.setActiveTab(n);
                    }
                }
            
            
            });
            //
            //定义树节点,运行中心
          		
            root.appendChild(c1);//为根节点增加子结点c1


            //生成树形面板
            var tree = new Ext.tree.TreePanel({
                renderTo: "tree",
                root: root,//定位到根节点
                animate: true,//开启动画效果
                enableDD: false,//不允许子节点拖动
                border: false,//没有边框
                rootVisible: false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
            });
			
			
			 
			
			
			var semiroot = new Ext.tree.TreeNode({
                id: "semiroot",//根节点id
                text: ""
            });
			
			
			
            //定义树节点,研发中心
            var semic1 = new Ext.tree.TreeNode({
                id: 'semic1',//子结点id
                text: 'stock2',
                listeners: {
                    'click': function(node, event){
                        event.stopEvent();
                        var n = center_item.getComponent(node.id);
                        
                        if (!n) { //判断是否已经打开该面板   
                            n = center_item.add({
                                'id': node.id,
                                'title': node.text,
                                closable: true, //通过html载入目标页   
                        //        html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="src/semifinished/semifinished-out.html"></iframe>'
                            });
                        }
                        center_item.setActiveTab(n);
                    }
                }
            
            
            });
		
			
            semiroot.appendChild(semic1);//为根节点增加子结点c1
           
			
            //生成树形面板
            var semifinishedtree = new Ext.tree.TreePanel({
                renderTo: "semifinishedtree",
                root: semiroot,//定位到根节点
                animate: true,//开启动画效果
                enableDD: false,//不允许子节点拖动
                border: false,//没有边框
                rootVisible: false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
            });
			
			


			//成品库
			var prodroot = new Ext.tree.TreeNode({
                id: "prodroot",//根节点id
                text: ""
            });
			
			
			
            //定义树节点,研发中心
            var product1 = new Ext.tree.TreeNode({
                id: 'product1',//子结点id
                text: 'stock3',
                listeners: {
                    'click': function(node, event){
                        event.stopEvent();
                        var n = center_item.getComponent(node.id);
                        
                        if (!n) { //判断是否已经打开该面板   
                            n = center_item.add({
                                'id': node.id,
                                'title': node.text,
                                closable: true, //通过html载入目标页   
                         //       html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="src/product/out.html"></iframe>'
                            });
                        }
                        center_item.setActiveTab(n);
                    }
                }
             });
			
			
            prodroot.appendChild(product1);//为根节点增加子结点c1
         
			
            //生成树形面板
            var producttree = new Ext.tree.TreePanel({
                renderTo: "producttree",
                root: prodroot,//定位到根节点
                animate: true,//开启动画效果
                enableDD: false,//不允许子节点拖动
                border: false,//没有边框
                rootVisible: false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
            });
			
        });
        changeTheme('gray')
    </script>
    <body>
    
        <div id="north-div">
        </div>
        <div id="south-div">
        </div>
        <div id="west-div">
        </div>
        <div id='center-div'>
        </div>
    </body>
</html>
